import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { HashRouter } from 'react-router-dom'
import { Provider } from 'react-redux'
// 主题
import { ThemeProvider } from 'styled-components'

import store from './store'
import 'normalize.css'
import './assets/css/index.css'
import App from './App.jsx'
import theme from './assets/theme'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    {/* 注意: 这里 Suspense 异步要放在 Provider 里面 */}
    {/* 如果放在外面,那么由于 Suspense 是异步加载的, Provider 提供数据时, Suspense 可能还没加载下来 */}
    {/* Suspense 异步加载的 js 文件发出的事件,是不会被监听到的 */}
    {/* redux */}
    <Provider store={store}>
      {/* 主题 */}
      <ThemeProvider theme={theme}>
        <HashRouter>
          <App />
        </HashRouter>
      </ThemeProvider>
    </Provider>
  </StrictMode>
)
